<template>
  <div class="ad-register">
    <div class="login-info">
      <img src="@/assets/images/login/logo.svg" alt="" class="logo1" />
      <div class="welcome-title">
        <div class="ft-56 fw-800 color2">Welcome to</div>
        <div class="ft-56 fw-800 color1 mb-24">USAdrop Ads Agency</div>
        <div class="color2 fw-500 mb-24">USAdrop Facebook Ads Account</div>
        <div class="ft-56 fw-800 color2 mb-48">USAdrop Ads-agency Service</div>
        <div class="btnContent">
          <div class="btnInfo">
            <img src="@/assets/images/login/icon1.png" alt="" />
            <div class="text">
              Up to <span class="color1">5%</span> Cash Back
            </div>
          </div>
          <div class="btnInfo">
            <img src="@/assets/images/login/icon2.png" alt="" />
            <div class="text"><span class="color1">0%</span> Charging Free</div>
          </div>
          <div class="btnInfo">
            <img src="@/assets/images/login/icon3.png" alt="" />
            <div class="text">Stable Ads Account</div>
          </div>
          <div class="btnInfo">
            <img src="@/assets/images/login/icon4.png" alt="" />
            <div class="text">No Spending Limits</div>
          </div>
        </div>
      </div>
    </div>
    <div class="login-content">
      <img src="@/assets/images/login/logo.svg" alt="" class="logo2" />
      <template v-if="step === 2">
        <p class="login-head1" style="margin-top: 90px">User Registration</p>
        <p class="login-head" style="margin-bottom: 20px">
          USAdrop Ads-agency Service
        </p>
      </template>
      <template v-if="step === 1">
        <p class="login-head" style="margin-top: 95px; margin-bottom: 20px">
          USAdrop Ads-agency Service
        </p>
      </template>
      <!-- <p class="login-head1">User Registration</p>
      <p class="login-head">USAdrop Ads-agency Service</p> -->
      <div class="step">
        <span class="name active">step 1</span>
        <img src="@/assets/images/login/step-line.png" alt="" />
        <span class="name" :class="step === 2 ? 'active' : ''">step2</span>
      </div>
      <el-form
        v-show="step === 1"
        label-position="top"
        :rules="rules"
        :model="formStep1"
        ref="formRef"
        class="regisForm"
      >
        <el-form-item
          label=" "
          class="option"
          prop="name"
          :rules="[
            {
              required: true,
              message: 'required'
            }
          ]"
        >
          <el-input v-model="formStep1.name" placeholder="Name" />
        </el-form-item>
        <el-form-item
          label=" "
          class="option"
          prop="email"
          :rules="[
            {
              required: true,
              message: 'required'
            }
          ]"
        >
          <el-input v-model="formStep1.email" placeholder="Email" />
        </el-form-item>
        <el-form-item prop="phone" label=" ">
          <div class="redcolor">*</div>
          <div class="combine" :class="errorCombine ? 'errorBorder' : ''">
            <el-select
              border="none"
              v-model="combineType"
              placeholder="Select"
              style="min-width: 120px; width: 120px"
            >
              <el-option
                v-for="item in typeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-select
              v-if="combineType === 'whatsApp'"
              style="min-width: 100px; width: 100px"
              v-model.trim="formStep1.zone"
              filterable
              class="select-inner"
            >
              <template #prefix>
                <i :class="selectedClass"></i>
              </template>
              <el-option
                v-for="item in optionsCopy"
                :key="item.Id"
                :label="'(' + '+' + item.PhoneCode + ')'"
                :value="item.Id"
                style="
                  color: #000;
                  font-family: Regular;
                  -webkit-font-smoothing: antialiased;
                "
              >
                <span
                  style="
                    float: left;
                    color: #8492a6;
                    font-size: 13px;
                    font-family: Regular;
                    -webkit-font-smoothing: antialiased;
                  "
                >
                  <i :class="item.NationalFlag"></i>&nbsp;
                  {{ item.Name + '(+' + item.PhoneCode + ')' }}</span
                >
              </el-option>
            </el-select>
            <el-input
              ref="combineInputRef"
              v-model="formStep1.phone"
              @blur="blurCombineInput"
            />
          </div>
          <div class="errorText" v-if="errorCombine">required</div>
        </el-form-item>
        <el-form-item
          label=" "
          class="option"
          prop="password"
          :rules="[
            {
              required: true,
              message: 'required'
            }
          ]"
        >
          <el-input
            v-model="formStep1.password"
            :show-password="true"
            placeholder="Password"
          />
        </el-form-item>
        <el-form-item label=" " class="option" prop="confirmPassword">
          <el-input
            v-model="formStep1.confirmPassword"
            :show-password="true"
            placeholder="Confirm password"
          />
        </el-form-item>
        <div class="login-bottom">
          <div class="btns">
            <el-button @click="goStep2(formRef)">Next Step</el-button>
            <div class="small">
              Existing account?
              <span class="cursor" @click="goLogin">Sign Up</span>
            </div>
          </div>
        </div>
      </el-form>
      <el-form
        v-show="step === 2"
        label-position="top"
        :model="formStep2"
        ref="formStep2Ref"
        class="regisForm step2Form"
      >
        <el-form-item
          label="How long have you been in the Dropshipping business"
          class="option"
          prop="option1"
          :rules="[
            {
              required: true,
              message: 'required'
            }
          ]"
        >
          <el-select v-model="formStep2.option1" placeholder="Please choose">
            <el-option
              v-for="item in option1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="What's your dropshipping store's daily order count?"
          class="option"
          prop="option2"
          :rules="[
            {
              required: true,
              message: 'required'
            }
          ]"
        >
          <el-select v-model="formStep2.option2" placeholder="Please choose">
            <el-option
              v-for="item in option2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="What's your average daily advertising spend?"
          class="option"
          prop="option3"
          :rules="[
            {
              required: true,
              message: 'required'
            }
          ]"
        >
          <el-select v-model="formStep2.option3" placeholder="Please choose">
            <el-option
              v-for="item in option3"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="Which country do you promote? What category?"
          class="option"
          prop="option4"
          :rules="[
            {
              required: true,
              message: 'required'
            }
          ]"
        >
          <el-input v-model="formStep2.option4" placeholder="Please enter" />
        </el-form-item>
        <div class="register-step2">
          <el-button class="btn btn1" @click="backStep1">Back</el-button>
          <el-button class="btn btn2" @click="confirmStep2(formStep2Ref)"
            >Confirm</el-button
          >
        </div>
      </el-form>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import router from '@/router/router'
import type { FormInstance } from 'element-plus'
const formStep1 = reactive({
  name: '',
  email: '',
  zone: 1,
  phone: '',
  password: '',
  confirmPassword: ''
})
const formStep2 = reactive({
  option1: '',
  option2: '',
  option3: '',
  option4: ''
})
const option1 = [
  {
    label: 'Not start yet',
    value: '1'
  },
  {
    label: 'Less than 6 months',
    value: '2'
  },
  {
    label: '6 months -2 years',
    value: '3'
  },
  {
    label: 'Over 2 years',
    value: '4'
  }
]
const option2 = [
  {
    label: '1-10 orders',
    value: '1'
  },
  {
    label: '11-50 years',
    value: '2'
  },
  {
    label: '50+ orders',
    value: '3'
  }
]
const option3 = [
  {
    label: '5-200 USD',
    value: '1'
  },
  {
    label: '200-500 USD',
    value: '2'
  },
  {
    label: '500-1000 USD',
    value: '3'
  },
  {
    label: '1000+ USD',
    value: '4'
  }
]
const typeOptions = [
  {
    label: 'WhatsApp',
    value: 'whatsApp'
  },
  {
    label: 'skype',
    value: 'skype'
  },
  {
    label: 'Phone',
    value: 'phone'
  }
]
const optionsCopy: any = [
  {
    Id: 1,
    Name: 'United States',
    FullName: null,
    DoubleCharacterCode: 'US',
    ThreeCharacterCode: null,
    PhoneCode: '1',
    EnglishName: 'United States',
    EnglishFullName: null,
    Abbreviation: null,
    ContinentsName: null,
    IsCommonCountry: false,
    IsEU: false,
    NationalFlag: 'famfamfam-flag-us'
  },
  {
    Id: 2,
    Name: 'Afghanistan',
    FullName: null,
    DoubleCharacterCode: 'AF',
    ThreeCharacterCode: null,
    PhoneCode: '93',
    EnglishName: 'Afghanistan',
    EnglishFullName: null,
    Abbreviation: null,
    ContinentsName: null,
    IsCommonCountry: false,
    IsEU: false,
    NationalFlag: 'famfamfam-flag-af'
  }
]
const selectedClass = ref('famfamfam-flag-us')
const combineType = ref('whatsApp')
const step = ref(1)
const formRef = ref<FormInstance>()
const formStep2Ref = ref<FormInstance>()
const rules = {
  email: [
    { required: true, message: 'Field  cannot be empty ', trigger: 'blur' },
    {
      type: 'email',
      message: 'Please enter the correct Email address',
      trigger: ['blur', 'change']
    }
  ],
  password: [
    { required: true, message: 'Field  cannot be empty', trigger: 'blur' }
  ],
  confirmPassword: [
    {
      required: true,
      message: 'required'
    },
    {
      validator: (rule: any, value: any, callback: any) => {
        if (value !== formStep1.password) {
          callback(new Error('Entered passwords differ!'))
        } else {
          callback()
        }
      },
      trigger: ['blur', 'change']
    }
  ]
}
const combineInputRef = ref(null)
const errorCombine = ref(false)
const blurCombineInput = (e: any) => {
  if (!e.target?.value) {
    errorCombine.value = true
  } else {
    errorCombine.value = false
  }
}
const goLogin = () => {
  router.replace('/login')
}

const goStep2 = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      if (!formStep1.phone) {
        errorCombine.value = true
        return false
      } else {
        errorCombine.value = false
        //所有校验通过后
        step.value = 2
      }
    } else {
      if (!formStep1.phone) {
        errorCombine.value = true
      } else {
        errorCombine.value = false
      }
      return false
    }
  })
}
const backStep1 = () => {
  step.value = 1
}
const confirmStep2 = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    console.log(formStep2, 'formstep2')

    if (valid) {
    } else {
      return false
    }
  })
}
const toResist = () => {}
const forgetTap = () => {}
</script>
<style lang="scss" scoped>
@import './common.scss';
@import './famfamfam-flags.scss';
$color1: #bc0c34;
$color2: #15104b;
.ad-register {
  width: 100%;
  height: calc(100vh - 94px);
  padding-top: 94px;
  background: url('@/assets/images/login/loginBg.png') no-repeat;
  background-size: cover;
  text-align: center;
  align-items: center;
  display: flex;
  justify-content: center;
  .login-info {
    // width: 60%;
    margin-right: 80px;
    text-align: left;
    .logo1 {
      width: 215px;
      height: 128px;
      margin-bottom: 40px;
    }
    .welcome-title {
    }
    .btnContent {
      display: flex;
      width: 620px;
      flex-wrap: wrap;
      justify-content: space-between;
      .btnInfo {
        background: #e0e3f2;
        box-shadow: 2px 3px 4px 0px #231d6540;
        width: 260px;
        border-radius: 16px;
        margin-bottom: 40px;
        font-size: 16px;
        color: $color2;
        display: flex;
        align-items: center;
        padding: 8px;
        img {
          width: 40px;
          height: 40px;
          margin-right: 8px;
        }
        .text {
          padding-left: 8px;
          color: $color2;
          font-weight: 600;
          border-left: 1.5px solid $color2;
        }
      }
    }
  }
  .login-content {
    width: 424px;
    height: 718px;
    background: #fff;
    border-radius: 30px;
    padding: 10px 40px 20px;
    position: relative;
    .logo2 {
      width: 90px;
      height: 64px;
      position: absolute;
      left: 40px;
      margin-bottom: 30px;
    }
    .login-head {
      font-size: 18px;
      color: #000000;
      font-weight: 500;

      text-align: center;
    }
    .login-head1 {
      font-size: 26px;
      font-weight: 500;
      margin-bottom: 5px;
    }
    .option {
      width: 420px;
      height: 68px;
      margin: 0 auto 10px;
      padding-left: 3px;
      :deep(.el-input__wrapper) {
        border-radius: 50px;
        font-family: 'Regular';
        -webkit-font-smoothing: antialiased;
        width: 100%;
        height: 42px;
        border: 1px solid #cccccc;
      }
      :deep(.el-select__wrapper) {
        border-radius: 50px;
        font-family: 'Regular';
        -webkit-font-smoothing: antialiased;
        width: 100%;
        height: 42px;
        border: 1px solid #cccccc;
      }
    }
    .step2Form {
      .option {
        height: 75px;
      }
    }
    .combine {
      height: 40px;
      width: 100%;
      border-radius: 40px;
      padding: 2px 24px 2px 5px;
      border: 2px solid #d8d8d8;
      display: flex;
      align-items: center;
      :deep(.el-select__wrapper) {
        box-shadow: none;
      }
      :deep(.el-input__wrapper) {
        box-shadow: none;
      }
    }
    .errorText {
      color: var(--el-color-danger);
      width: 100%;
      text-align: left;
      height: 1px;
    }
    .errorBorder {
      border: none;
      box-shadow: 0 0 0 1px var(--el-color-danger) inset;
    }
    .step {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0px 0 20px 0;

      .name {
        font-size: 18px;
        font-weight: 600;
        color: #999999;
      }
      .active {
        color: var(--el-color-primary);
      }
      img {
        width: 124px;
        height: 18px;
        margin: 0 14px;
      }
    }
    .regisForm {
      :deep(.el-form-item__label) {
        margin-bottom: 0px;
      }
    }
    .login-bottom {
      margin-top: 55px;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      .el-button {
        width: 226px;
        height: 44px;
        background: $color2;
        font-size: 16px;
        margin-bottom: 8px;
        color: #ffffff;
        border-radius: 30px;
      }
      .small {
        font-size: 14px;
        color: #999999;
      }
    }
    .register-step2 {
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: space-between;
      margin-top: 48px;
      .btn {
        width: 210px;
        height: 44px;
        border-radius: 30px;
        font-size: 16px;
      }
      .btn1 {
        color: $color2;
        background: #eff1f3;
      }
      .btn2 {
        color: #ffffff;
        background: $color2;
      }
    }
  }
}
</style>
